<html>
    <head>
        <title>电量分析</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">

        <style>
            body{
                background: #F0F2F6;
            }


            .page-head{
                padding-left: 10px;
                padding-top: 10px;
                margin-bottom: 0px;
                border: solid 0px red;
            }

            .chart-outer{
                height: 200px;
            }

            .line{
                text-align: center;
            }

            .ele-title{
                background: #D8D8D8;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin-bottom: 20px;
                margin-top: -10px;
            }




        </style>
    </head>
    <body>
        <div class="page" id="page-analysis">

            <div class="page-title">用量分析</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree v-on:click-node="onTreeNode" v-bind:ischeckbox="false" :tabsign="'zd'" :zonetype="3" :energy="energyType"></dev-tree>
                    </el-col>
                    <el-col :span="20">
                        <div class="page-head">
                            <el-form :inline="true" style="margin-bottom: 0px;">
                                <el-form-item label="">
                                    <el-date-picker :type="dateType" v-model="query.beginTime" placeholder="起始" style="width: 150px;" value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>

                                <el-form-item>
                                    <el-tooltip effect="dark" content="请点击左边树中设备或者区域" v-model="tooltip" placement="right">
                                        <el-button type="primary" @click="onSearch">查询</el-button>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>


                        </div>

                        <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                            <!--
                            <el-tab-pane label="分时用电" name="tabHour">

                                                <el-form-item size="mini">
                                                        <el-button type="primary" @click="search">查询</el-button>
                                                    </el-form-item>

                                                <el-form-item size="mini" style="float: right;">
                                                        <el-button type="primary" @click="onAddSchemeClick">新增方案</el-button>
                                                        <el-button type="primary" @click="search">修改方案</el-button>
                                                        <el-button type="primary" @click="search">删除方案</el-button>
                                                </el-form-item>
                                    </el-form>

                                    <el-row>
                                        <el-col :span="24">
                                            <div class="chart-outer">

                                            </div>
                                        </el-col>
                                    </el-row>

                                    <el-row>
                                        <el-col :span="12">
                                            <div class="chart-outer" style="height: 250px;">
                                                <h6>电量统计</h6>
                                                <el-table
                                                    :data="tableDayEle"
                                                    border
                                                    stripe
                                                    size="mini"
                                                    style="width: 100%;">
                                                    <el-table-column
                                                        prop="typeName"
                                                        label="电量分类">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="eValue"
                                                        label="用电量 (kWh)">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="eFee"
                                                        label="电费 (RMB)">
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </el-col>

                                        <el-col :span="12">
                                                <div class="chart-outer" style="height: 250px;">
                                                    <h6>电量占比</h6>
                                                    <chart-pie v-bind:data="chartERatioData"></chart-pie>
                                                </div>
                                        </el-col>
                                    </el-row>
                            </el-tab-pane>
                            -->
                            <el-tab-pane label="日用" name="tabDay">
                                <div class="chart-outer" >
                                    <chart-bar v-bind:data="eleChartDay"></chart-bar>
                                </div>
                                <p class="ele-title">{{query.beginTime}} 日用量：{{dayTotal}} </p>

                            </el-tab-pane>
                            <el-tab-pane label="月用" name="tabMonth">
                                <div class="chart-outer" >
                                    <chart-bar v-bind:data="eleChartMonth"></chart-bar>
                                </div>
                                <p class="ele-title">{{query.beginTime.substr(0,7)}} 月用量：{{monthTotal}} </p>

                                <div class="chart-outer" >
                                    <chart-elex v-bind:option="eleChartMonthChain"></chart-elex>
                                </div>

                                <div class="chart-outer" >
                                    <chart-elex v-bind:option="eleChartMonthWith"></chart-elex>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="年用" name="tabYear">
                                    <div class="chart-outer" >
                                        <chart-bar v-bind:data="eleChartYear"></chart-bar>
                                    </div>
                                    <p class="ele-title">{{query.beginTime.substr(0,4)}} 年用量：{{yearTotal}} </p>

                                    <div class="chart-outer" >
                                        <chart-elex v-bind:option="eleChartYearChain"></chart-elex>
                                    </div>
                            </el-tab-pane>
                        </el-tabs>








                    </el-col>
                </el-row>
            </div>



        </div>



        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

        <script>

            var vuePage=new Vue({
                el:'#page-analysis',
                data:{
                    tooltip:false,
                    dateType:'date',
                    query:{
                        beginTime:'',
                        endTime:'',
                    },
                    tabName:'tabDay',
                    treeNode:null,
                    eleChartDay:{},//日用电量图表
                    dayTotal:0,
                    eleChartMonth:{}, //月用电量图表
                    monthTotal:0,
                    eleChartMonthChain:{}, //月用电环比
                    eleChartMonthWith:{}, //月用电同比

                    eleChartYear:{}, //月用电量图表
                    yearTotal:0,
                    eleChartYearChain:{}, //年用电环比
                    energyType:'',
                    zoneType:'',
                    zoneId:'',
                },
                methods:{
                    onSearch:function(){
                    },
                    onTreeNode:function(data){
                        console.log('onTreeNode',data);
                        if(data.id.indexOf('D')==0){
                            /*
                            this.$message({
                                message: '请点击设备！',
                                type: 'warning'
                            });*/
                            this.zoneType = 3;
                            this.zoneId = data.attributes.deviceId

                        }else if(data.id.indexOf('Z')==0){
                            this.zoneType = 0;
                            this.zoneId = data.dataId
                        }else {
                            return;
                        }
                        this.treeNode = data;
                        switch(this.tabName){
                            case 'tabDay':
                                this.loadDayDatas();
                            break;
                            case 'tabMonth':
                                this.loadMonthDatas();
                            break;
                            case 'tabYear':
                                this.loadYearDatas();
                            break;
                        }
                    },
                    onTabClick(tab, event){
                        switch(tab.name){
                            case 'tabDay':
                                this.dateType='date';
                                this.loadDayDatas();
                            break;
                            case 'tabMonth':
                                this.dateType='month';
                                this.loadMonthDatas();
                            break;
                            case 'tabYear':
                                this.dateType='year';
                                this.loadYearDatas();
                            break;
                        }

                    },
                    onAddSchemeClick(){
                        this.editSchemeVisible=true;
                    },


                    loadDayDatas:function(){
                        if(!this.treeNode)return;
                        let _self = this;
                        var dArr = this.query.beginTime.split('-');
                        var param={
                            zoneIds:this.zoneId,
                            zoneType: this.zoneType,
                            energyType:this.energyType,
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0
                        };
                        HttpUtil.get('Analysis/getEnergyUse', param)
                        .success(function(data){
                            console.log('getEnergyUse',data);
                            let xlabels=[],yvalues=[];
                            let datas = data.data[0];

                            if(data.data.length==0){
                                _self.eleChartDay = {
                                    title:_self.treeNode.name,
                                    x:[],
                                    y:[]
                                };
                                return;
                            }

                            for(let i=0;i<24;i++){
                                let field = i+4;
                                if(field<10) field='0'+field;
                                xlabels.push(i);
                                yvalues.push(datas["field" + field]);

                                if(datas["field" + field]) _self.dayTotal+=datas["field" + field];
                            }

                            _self.eleChartDay={
                                title:_self.treeNode.text,
                                x:xlabels,
                                y:[
                                    {
                                        name:_self.treeNode.name,
                                        value:yvalues
                                    }
                                ]
                            };


                        });
                    },

                    loadMonthDatas:function(){
                        if(!this.treeNode)return;
                        let _self = this;
                        var dArr = this.query.beginTime.substr(0,7).split('-');
                        var param={
                            zoneIds:this.zoneId,
                            zoneType: this.zoneType,
                            energyType:this.energyType,
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0
                        };
                        HttpUtil.get('Analysis/getEnergyUse', param)
                        .success(function(data){
                            let xlabels=[],yvalues=[];
                            let datas = data.data[0];

                            if(data.data.length==0){
                                _self.eleChartMonth = {
                                    title:_self.treeNode.name,
                                    x:[],
                                    y:[]
                                };
                                return;
                            }

                            for(let i=0;i< datas.field03;i++){
                                let field = i+4;
                                if(field<10) field='0'+field;
                                xlabels.push(i+1);
                                yvalues.push(datas["field" + field]);

                                if(datas["field" + field]) _self.monthTotal+=datas["field" + field];
                            }

                            _self.eleChartMonth={
                                title:_self.treeNode.name,
                                x:xlabels,
                                y:[
                                    {
                                        name:_self.treeNode.name,
                                        value:yvalues
                                    }
                                ]
                            };
                        });

                        HttpUtil.get('Analysis/getEnergySameTime', param)
                            .success(function(data){
                            console.log('getEnergySameTime',data);

                            if(data.data.length==0){
                                _self.eleChartMonthChain = {
                                    title:'环比',
                                };

                                _self.eleChartMonthWith = {
                                    title:'同比',
                                };


                                return;
                            }

                            let currDatas=[], xlabels=[],yvalues=[]; //本期数据
                            for(let i=0;i<data.data.length;i++){
                                if(data.data[i].field01==1){
                                    currDatas.push(data.data[i]);
                                }
                            }

                            for(let i=0;i<currDatas.length;i++){
                                xlabels.push(currDatas[i].groupName.substr(6,2));
                                if(i==0){
                                    yvalues.push(0);
                                }else{
                                    let ratio = ((currDatas[i].field02-currDatas[i-1].field02)/currDatas[i-1].field02)*100;
                                    yvalues.push(ratio.toFixed(1));
                                }
                            }

                            _self.eleChartMonthChain={
                                title:{
                                    text:'环比'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: xlabels
                                },
                                yAxis: {
                                    type: 'value',
                                    name:'(%)'
                                },
                                series: [{
                                    data: yvalues,
                                    type: 'line'
                                }]
                            };

                            //同比
                            let yvalues1=[];
                            for(let i=0;i<currDatas.length;i++){

                                let _data = data.data.findIndex(item=>{
                                    return item.field01==2 && item.groupName.substr(6,2) == xlabels[i];
                                });

                                if(!_data){yvalues1.push(null);}
                                else{
                                    let ratio = ((currDatas[i].field02-_data.field02)/_data.field02)*100;
                                    yvalues1.push(ratio.toFixed(1));
                                }
                            }
                            _self.eleChartMonthWith={
                                title:{
                                    text:'同比'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: xlabels
                                },
                                yAxis: {
                                    type: 'value',
                                    name:'(%)'
                                },
                                series: [{
                                    data: yvalues1,
                                    type: 'line'
                                }]
                            };



                        });

                    },

                    loadYearDatas:function(){
                        if(!this.treeNode)return;
                        let _self = this;
                        var dArr = this.query.beginTime.substr(0,4).split('-');
                        var param={
                            zoneIds:this.zoneId,
                            zoneType: this.zoneType,
                            energyType:this.energyType,
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0
                        };
                        HttpUtil.get('Analysis/getEnergyUse', param)
                            .success(function(data){
                            console.log('getEnergyUse',data);
                            let xlabels=[],yvalues=[];
                            let datas = data.data[0];

                            if(data.data.length==0){
                                _self.eleChartYear = {
                                    title:_self.treeNode.name,
                                    x:[],
                                    y:[]
                                };
                                return;
                            }

                            for(let i=0;i< 12;i++){
                                let field = i+2;
                                if(field<10) field='0'+field;
                                xlabels.push(i+1);
                                yvalues.push(datas["field" + field]);

                                if(datas["field" + field]) _self.yearTotal+=datas["field" + field];
                            }

                            _self.eleChartYear={
                                title:_self.treeNode.name,
                                x:xlabels,
                                y:[
                                    {
                                        name:_self.treeNode.name,
                                        value:yvalues
                                    }
                                ]
                            };



                        });

                        HttpUtil.get('Analysis/getEnergySameTime', param)
                            .success(function(data){
                            console.log('getEnergySameTime',data);

                            if(data.data.length==0){
                                _self.eleChartMonthChain = {
                                    title:'环比',
                                };

                                return;
                            }


                            let currDatas=[], xlabels=[],yvalues=[]; //本期数据
                            for(let i=0;i<data.data.length;i++){
                                if(data.data[i].field01==1){
                                    currDatas.push(data.data[i]);
                                }
                            }

                            for(let i=0;i<currDatas.length;i++){
                                xlabels.push(currDatas[i].groupName.substr(4,2));
                                if(i==0){
                                    yvalues.push(0);
                                }else{
                                    let ratio = ((currDatas[i].field02-currDatas[i-1].field02)/currDatas[i-1].field02)*100;
                                    yvalues.push(ratio.toFixed(1));
                                }
                            }

                            _self.eleChartYearChain={
                                title:{
                                    text:'环比'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: xlabels
                                },
                                yAxis: {
                                    type: 'value',
                                    name:'(%)'
                                },
                                series: [{
                                    data: yvalues,
                                    type: 'line'
                                }]
                            };




                        });


                    }


                },
                created:function(){
                    this.energyType =HttpUtil.getQueryString('energyType');
                    this.query.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);

                    /*
                    this.tableDayEle=[{
                        typeName:'尖电量',
                        eValue:0,
                        eFee:0
                    },{
                        typeName:'峰电量',
                        eValue:0,
                        eFee:0
                    },{
                        typeName:'平电量',
                        eValue:0,
                        eFee:0
                    },{
                        typeName:'谷电量',
                        eValue:0,
                        eFee:0
                    },{
                        typeName:'累计电量',
                        eValue:0,
                        eFee:0
                    }];*/



                },
                mounted:function(){
                    this.tooltip=true;
                    /*
                    this.eleChartDay={
                        title:'日用电量',
                        x:[1,2,3],
                        y:[
                            {
                                name:'设备1',
                                value:[10,20,14]
                            }
                        ]
                    };*/


                }
            });


        </script>

    </body>
</html>
